<!DOCTYPE html>
<!--suppress ALL-->
<html xmlns:th="http://www.thymeleaf.org">
<html>
<head lang="en">
	<base th:href="@{/}"><!-- 不用base就使用th:src="@{/js/jquery.min.js} -->
		<meta charset="UTF-8">
		<title>详情页</title>
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<link rel="stylesheet" type="text/css" href="css/proList.css"/>
		<link rel="stylesheet" href="layui/css/modules/layer/default/layer.css">
		<script src="layui/layui.js"></script>
	</head>
	<body>
		<!------------------------------head------------------------------>
		<div class="head">
			<div class="wrapper clearfix">
				<div class="clearfix" id="top">
					<h1 class="fl"><a th:href="@{/}"><img src="img/logo.png"/></a></h1>
					<div class="fr clearfix" id="top1">
						<p class="fl" style="font-size: 15px">
							最家家居城欢迎您！
							<a th:href="(${session.userName} == null)?'user/toLogin':'#'" >
								<span th:if="${session.userName} == null" >
									 请登录
								</span>
								<span th:if="${session.userName} != null" >
									<span th:text="${session.userName}" ></span>
									<a th:href="@{user/logOut}" style="border-right: 1px solid #dbdbdb;">注销</a>
								</span>
							</a>

							<!--<a href="#" th:text="${session.userName}" id="reg"></a>-->
							<a th:href="@{user/toReg}">新用户注册</a>
						</p>
						<form action="/furniture/pro/search" method="post" class="fl">
							<input type="text" placeholder="热门搜索：干花花瓶" id="searchContent" name="searchContent" />
							<input type="submit" value="" id="searchBtn" />
						</form>
						<div class="btn fl clearfix">
							<a href="mygxin.html"><img src="img/grzx.png"/></a>
							<a href="#" class="er1"><img src="img/ewm.png"/></a>
							<a href="cart.html"><img src="img/gwc.png"/></a>
							<p><a href="#"><img src="img/smewm.png"/></a></p>
						</div>
					</div>
				</div>
				<ul class="clearfix" id="bott">
					<li><a th:href="@{/}">首页</a></li>
					<li>
						<a th:href="@{/pro/allPro}">所有商品</a>
					</li>

					<li>
						<a th:href="@{pro/softDecoration}">布艺软饰</a>
					</li>
					<li><a th:href="@{pro/perfume}">蜡艺香薰</a></li>
					<li><a th:href="@{pro/ideaPro}">创意家居</a></li>
				</ul>
			</div>
		</div>
		<!-----------------address------------------------------->
<!--		<div class="address">
			<div class="wrapper clearfix">
				<a>首页</a>
				<span>/</span>
				<a>装饰摆件</a>
				<span>/</span>
				<a>干花花艺</a>
				<span>/</span>
				<a>【最家】非洲菊仿真花干花</a>
			</div>
		</div>-->
		<!-----------------------Detail------------------------------>
		<div class="detCon">
			<div class="proDet wrapper">
				<div class="proCon clearfix">
					<div class="proImg fl">
						<img class="det" th:src="'img/' + ${pro.proPhoto}" style="margin-left: 100px;width: 470px;height: 470px;" />
						<!--<div class="smallImg clearfix">
							<img src="img/temp/proDet01.jpg" data-src="img/temp/proDet01_big.jpg">
							<img src="img/temp/proDet02.jpg" data-src="img/temp/proDet02_big.jpg">
							<img src="img/temp/proDet03.jpg" data-src="img/temp/proDet03_big.jpg">
							<img src="img/temp/proDet04.jpg" data-src="img/temp/proDet04_big.jpg">
						</div>-->
					</div>
					<div class="fr intro">
						<div class="title">
							<h4 th:text="${pro.proName}"></h4>
							<p style="font-size: 15px; margin-bottom: 30px;" th:text="${pro.content}" ></p>
							<span th:text="'￥ '+${pro.price}"></span>
						</div>
						<div class="proIntro">
<!--							<p>颜色分类</p>
							<div class="smallImg clearfix categ">
								<p class="fl"><img src="img/temp/prosmall01.jpg" alt="白瓷花瓶+20支快乐花" data-src="img/temp/proBig01.jpg"></p>
								<p class="fl"><img src="img/temp/prosmall02.jpg" alt="白瓷花瓶+20支兔尾巴草" data-src="img/temp/proBig02.jpg"></p>
								<p class="fl"><img src="img/temp/prosmall03.jpg" alt="20支快乐花" data-src="img/temp/proBig03.jpg"></p>
								<p class="fl"><img src="img/temp/prosmall04.jpg" alt="20支兔尾巴草" data-src="img/temp/proBig04.jpg"></p>
							</div>-->
							<p style="font-size: 15px">库存<span th:text="${pro.account}"></span>件</p>
							<div class="num clearfix">
								<img class="fl sub" src="img/temp/sub.jpg">
								<span class="fl" contentEditable="true" id="quantity">1</span>
								<img class="fl add" src="img/temp/add.jpg">
<!--								<p class="please fl">请选择商品属性!</p>-->
							</div>
						</div>
						<div class="btns clearfix">
							<p class="buy fl" id="addShopCar">加入购物车</p>
							<!--<p class="cart fr">加入购物车</p>-->
						</div>
					</div>
				</div>
			</div>
			<!--============================偷偷获取获取商品属性，以便用ajax加入购物车=================-->
			<input type="hidden" id="proPhoto" th:value="${pro.proPhoto}">
			<input type="hidden" id="proName" th:value="${pro.proName}">
			<input type="hidden" id="content" th:value="${pro.content}">
			<input type="hidden" id="price" th:value="${pro.price}">
			<input type="hidden" id="acconut" th:value="${pro.account}">
			<input type="hidden" id="proId" th:value="${pro.proId}">
			<input type="hidden" id="proType" th:value="${pro.proType}">
			<!--==========================================================================================-->
		</div>
		<div class="introMsg wrapper clearfix">
			<div class="msgL fl">
				<div class="msgTit clearfix" style="margin-top: 50px;">
					<a class="on" style="font-size: 15px">所有评价</a>
<!--					<a>商品详情</a>-->
				</div>
				<div class="msgAll">
					<div class="eva">
						<div class="per clearfix" th:each="comment: ${comments}">
							<div class="perR fl">
								<p style="font-size: 17px" th:text="${comment.userName}"></p>
								<p style="font-size: 13px" th:text="${comment.comments}"></p>
<!--								<div class="clearfix">
									<p><img src="img/temp/eva01.jpg"></p>
									<p><img src="img/temp/eva02.jpg"></p>
									<p><img src="img/temp/eva03.jpg"></p>
									<p><img src="img/temp/eva04.jpg"></p>
									<p><img src="img/temp/eva05.jpg"></p>
								</div>-->
								<p><span th:text="${#dates.format(comment.createTime)}"></span></p>
							</div>
						</div>
					</div>
					<!--<div class="msgImgs">
						<img src="img/temp/det01.jpg">
						<img src="img/temp/det02.jpg">
						<img src="img/temp/det03.jpg">
						<img src="img/temp/det04.jpg">
						<img src="img/temp/det05.jpg">
						<img src="img/temp/det06.jpg">
						<img src="img/temp/det07.jpg">
					</div>-->
				</div>
			</div>
		</div>
		<div class="like">
			<h4>热销商品</h4>
			<div class="bottom">
				<div class="hd">
					<span class="prev"><img src="img/temp/prev.png"></span>
					<span class="next"><img src="img/temp/next.png"></span>
				</div>
				<div class="imgCon bd">
					<div class="likeList clearfix">
						<div>
							<a th:href="@{/pro/proDetail(proId=${hotPro.proId})}" th:each="hotPro:${hotPros}">
								<dl>
									<dt><img th:src="'img/'+${hotPro.proPhoto}"></dt>
									<dd><span style="font-size: 13px" th:text="${hotPro.proName}"></span></dd>
									<dd><span th:text="'￥ '+ ${hotPro.price}"></span></dd>
								</dl>
							</a>
						</div>
					</div>
				</div>
			</div>
		</div>
		<!--返回顶部-->
		<div class="gotop">
			<a href="cart.html">
			<dl class="goCart">
				<dt><img src="img/gt1.png"/></dt>
				<dd>去购<br />物车</dd>
				<span>1</span>
			</dl>
			</a>
			<a href="#" class="dh">
			<dl>
				<dt><img src="img/gt2.png"/></dt>
				<dd>联系<br />客服</dd>
			</dl>
			</a>
			<a href="mygxin.html">
			<dl>
				<dt><img src="img/gt3.png"/></dt>
				<dd>个人<br />中心</dd>
			</dl>
			</a>
			<a href="#" class="toptop" style="display: none;">
			<dl>
				<dt><img src="img/gt4.png"/></dt>
				<dd>返回<br />顶部</dd>
			</dl>
			</a>
			<p>400-800-8200</p>
		</div>
		<div class="msk"></div>
		<!--footer-->
		<div class="footer">
			<div class="top">
				<div class="wrapper">
					<div class="clearfix">
						<a href="#2" class="fl"><img src="img/foot1.png"/></a>
						<span class="fl">7天无理由退货</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="img/foot2.png"/></a>
						<span class="fl">15天免费换货</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="img/foot3.png"/></a>
						<span class="fl">满599包邮</span>
					</div>
					<div class="clearfix">
						<a href="#2" class="fl"><img src="img/foot4.png"/></a>
						<span class="fl">手机特色服务</span>
					</div>
				</div>
			</div>
			<p class="dibu">最家家居&copy;2013-2017公司版权所有 京ICP备080100-44备0000111000号<br />
			违法和不良信息举报电话：188-0130-1238，本网站所列数据，除特殊说明，所有数据均出自我司实验室测试</p>
		</div>
		<script src="js/jquery-1.12.4.min.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.SuperSlide.2.1.1.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/public.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/nav.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/pro.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/cart.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
			jQuery(".bottom").slide({titCell:".hd ul",mainCell:".bd .likeList",autoPage:true,autoPlay:false,effect:"leftLoop",autoPlay:true,vis:1});
		</script>

	<script>
		/*var param={"bookName":"${bookName}","bookPhoto":"${bookPhoto}","price":"${price}","uid":"${uid}"}; */
		$("#addShopCar").click(function () {
			var proPhoto = $("#proPhoto").val();
			var proId = $("#proId").val();
			var proName = $("#proName").val();
			var content = $("#content").val();
			var price = $("#price").val();
			var acconut = $("#acconut").val();
			var proType = $("#proType").val();
			var quantity = $("#quantity").html();
			var param={"proPhoto":proPhoto,"proName":proName,"content":content,"price":price,
						"account":acconut,"quantity":quantity,"proId":proId,"proType":proType};
			var url = "/furniture/pro/addShopCar";
			$.post(url,param,function(data){
				if (data.state==200){
					layer.msg(data.message);
				}
				else if (data.state==201){
						layer.confirm(data.message,{
							icon:0, btn:['确定','取消']
						},function () {
							location.href="/furniture/user/toLogin";
						},function () {
							return;
						});
				}
				else {
					layer.msg(data.message);
				}
			});
		});
	</script>
	</body>
</html>
